<template>
  <div class="document-cover">
    <!-- 标题 -->
    <div class="document-cover__top">
      <div class="document-cover__top-title">
        学科评估简况表
      </div>
      <div class="document-cover__top-tip">
        （工学门类，不含建筑学、城乡规划学、风景园林学学科）
      </div>
    </div>
    <!-- 学位授予单位 -->
    <table class="document-cover__table">
      <tbody>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-title"
              rowspan="2">
            学位授予单位
          </td>
          <td class="document-cover__table-tr-td underline">
            <div class="document-cover__table-tr-td-name">
              名称：
            </div>
            <el-input v-model="metaData.schoolName"
                      type="textarea"
                      placeholder="请输入单位名称"
                      :maxlength="25"
                      autosize
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-td upline">
            <div class="document-cover__table-tr-td-name">
              代码：
            </div>
            <el-input v-model="metaData.schoolId"
                      type="textarea"
                      placeholder="输入名称自动补全"
                      :maxlength="10"
                      autosize
                      readonly
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 一级学科 -->
    <table class="document-cover__table">
      <tbody>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-title"
              rowspan="2">
            一级学科
          </td>
          <td class="document-cover__table-tr-td underline">
            <div class="document-cover__table-tr-td-name">
              名称：
            </div>
            <el-input v-model="metaData.deptName"
                      type="textarea"
                      placeholder="请输入学科名称"
                      :maxlength="25"
                      autosize
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-td upline">
            <div class="document-cover__table-tr-td-name">
              代码：
            </div>
            <el-input v-model="metaData.deptId"
                      type="textarea"
                      placeholder="输入名称自动补全"
                      :maxlength="10"
                      autosize
                      readonly
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 联系人 -->
    <table class="document-cover__table">
      <tbody>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-title"
              rowspan="3">
            联系人
          </td>
          <td class="document-cover__table-tr-td underline">
            <div class="document-cover__table-tr-td-name">
              姓名：
            </div>
            <el-input v-model="metaData.contName"
                      type="textarea"
                      placeholder="输入联系人姓名"
                      :maxlength="20"
                      autosize
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-td upline">
            <div class="document-cover__table-tr-td-name">
              手机：
            </div>
            <el-input v-model="metaData.contPhone"
                      type="textarea"
                      placeholder="输入联系人手机号"
                      :maxlength="11"
                      autosize
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
        <tr class="document-cover__table-tr">
          <td class="document-cover__table-tr-td upline">
            <div class="document-cover__table-tr-td-name">
              邮箱：
            </div>
            <el-input v-model="metaData.contEmail"
                      type="textarea"
                      placeholder="输入联系人邮箱"
                      :maxlength="20"
                      autosize
                      class="document-cover__table-tr-td-input"/>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 部门 与 时间 -->
    <div class="document-cover__unit">
      教育部学位与研究生教育发展中心制表
    </div>
    <div class="document-cover__date">
      {{ date.year }} 年 {{ date.month }}  月 {{ date.day }} 日填表
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import api from '@/api/systemUser'
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    metaData: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    },
    'metaData.schoolName': {
      handler (newVal) {
        if (this.schoolId.length) {
          var data = this.schoolId.find(item => {
            return item.schoolName === newVal
          })
          this.metaData.schoolId = data ? data.id : ''
        }
      }
    },
    'metaData.deptName': {
      handler (newVal) {
        if (this.deptId.length) {
          var data = this.deptId.find(item => {
            return item.deptName === newVal
          })
          this.metaData.deptId = data ? data.id : ''
        }
      }
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })

    const newData = await getPageData('metaData')

    if (newData) {
      this.metaData = newData
    }
    let date = ''
    let year = ''
    let month = ''
    let day = ''
    if (this.metaData.writeData) {
      date = this.metaData.writeData
      year = moment(new Date(date)).year()
      month = moment(new Date(date)).month() + 1
      day = moment(new Date(date)).date()
    } else {
      year = moment().year()
      month = moment().month() + 1
      day = moment().date()
      this.metaData.writeData = moment().format('YYYY-MM-DD')
    }
    this.date = { year, month, day }
    // this.getID()
    this.getAllDept()
    this.getAllSchool()

    loading.close()
  },
  data () {
    return {
      metaData: {
        contEmail: '',
        contName: '',
        contPhone: '',
        deptId: '',
        deptName: '',
        schoolId: '',
        schoolName: '',
        status: 0,
        writeData: ''
      },
      date: {
        year: '',
        month: '',
        day: ''
      },
      schoolId: [],
      deptId: [],
      pageSize: 100,
      schoolAllPage: 1,
      deptAllPage: 1
    }
  },
  methods: {
    async getAllDept () {
      let allPage = 1
      const res = await api.getAllDept(1)
      const { code, result } = res
      if (code == 200 && result) {
        this.deptId.push(...result.dept)
        allPage = res.result.pages
        for (let i = 1; i < allPage; i++) {
          const res = await api.getAllDept(i + 1)
          const { code, result } = res
          if (code == 200 && result) {
            this.deptId.push(...result.dept)
          }
        }
      }
    },
    async getAllSchool () {
      const res = await api.getAllSchool(1)
      const { code, result } = res
      if (code == 200 && result) {
        this.schoolId.push(...result.school)
        const allPage = res.result.pages
        for (let i = 1; i < allPage; i++) {
          const res = await api.getAllSchool(i + 1)
          const { code, result } = res
          if (code == 200 && result) {
            this.schoolId.push(...result.school)
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/page/1-0-1.less";
</style>
